<template>
    <div>
        <div class="container">
            <el-form ref="form" :model="form" label-width="150px">

                <el-form-item label="公司介绍左侧图片">
                    <div style="display: flex;align-items: flex-end;">
                        <el-image style="width: 330px; height: 530px" :src="form.yj_img"
                            :preview-src-list="[form.yj_img]">
                        </el-image>
                        <div>
                            <div>图片大小:330*530</div>
                            <input type="file" accept="image/jpeg,image/jpg,image/gif,image/png,image/bmp"
                                id="cert_file" @change="imgChange1" />
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="自定义图标一">
                    <div style="display: flex;align-items: flex-end;">
                        <el-image style="width: 100px; height: 100px" :src="form.tb_one_img"
                            :preview-src-list="[form.tb_one_img]">
                        </el-image>
                        <div>
                            <div>图片大小:100*100</div>
                            <input type="file" accept="image/jpeg,image/jpg,image/gif,image/png,image/bmp"
                                id="cert_file" @change="imgChange2" />
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="愿景标题中文">
                    <el-input type="textarea" v-model="form.content"></el-input>
                </el-form-item>
                <el-form-item label="愿景标题英文">
                    <el-input type="textarea" v-model="form.e_content"></el-input>
                </el-form-item>
                <el-form-item label="自定义标题一中文">
                    <el-input type="textarea" v-model="form.table_one"></el-input>
                </el-form-item>
                <el-form-item label="自定义标题一英文">
                    <el-input type="textarea" v-model="form.e_table_one"></el-input>
                </el-form-item>
                <el-form-item label="自定义内容一中文">
                    <quill-editor ref="myTextEditor" v-model="form.text_one" :options="editorOption"></quill-editor>
                </el-form-item>
                <el-form-item label="自定义内容一英文">
                    <quill-editor ref="myTextEditor" v-model="form.e_text_one" :options="editorOption"></quill-editor>
                </el-form-item>
                <el-form-item label="自定义图标二">
                    <div style="display: flex;align-items: flex-end;">
                        <el-image style="width: 100px; height: 100px" :src="form.tb_two_img"
                            :preview-src-list="[form.tb_two_img]">
                        </el-image>
                        <div>
                            <div>图片大小:100*100</div>
                            <input type="file" accept="image/jpeg,image/jpg,image/gif,image/png,image/bmp"
                                id="cert_file" @change="imgChange3" />
                        </div>
                    </div>
                </el-form-item>
                <el-form-item label="自定义标题二中文">
                    <el-input type="textarea" v-model="form.table_two"></el-input>
                </el-form-item>
                <el-form-item label="自定义标题二英文">
                    <el-input type="textarea" v-model="form.e_table_two"></el-input>
                </el-form-item>
                <el-form-item label="自定义内容二中文">
                    <quill-editor ref="myTextEditor" v-model="form.text_two" :options="editorOption"></quill-editor>
                </el-form-item>
                <el-form-item label="自定义内容二英文">
                    <quill-editor ref="myTextEditor" v-model="form.e_text_two" :options="editorOption"></quill-editor>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">更新</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>

<script>
import {
    Loading
} from 'element-ui';
import AxiosPost from '../api/index'
import VueCropper from 'vue-cropperjs';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import {
    quillEditor
} from 'vue-quill-editor';
export default {
    name: 'LoginLogList',
    components: {
        VueCropper,
        quillEditor
    },
    data() {
        return {
            editorOption: {
                placeholder: 'Hello World'
            },
            form: {
                table_one: '',
                table_two: '',
                text_one: '',
                text_two: '',
                tb_one_img: '',
                tb_two_img: '',
                yj_img: '',
                content:'',
                e_content:'',
                e_table_one:'',
                e_table_two:'',
                e_text_one:'',
                e_text_two:'',
            },
            form2: {},
            files1: null,
            files2: null,
            files3: null,

        };
    },
    created() {
        this.getData()
    },
    methods: {
        async getData() {
            let info = await AxiosPost('/admin/shop_set/gsyj')
            if (info.code !== 10000) {
                this.$message.error(info.message)
                return false
            } else {
                this.form2 = info.data
                let api = 'https://wjapi.surveydiscovery.com/'
                this.form.table_one = info.data.table_one
                this.form.table_two = info.data.table_two
                this.form.text_one = info.data.text_one
                this.form.text_two = info.data.text_two
                this.form.content = info.data.content
                this.form.e_content = info.data.e_content
                this.form.e_table_one = info.data.e_table_one
                this.form.e_table_two = info.data.e_table_two
                this.form.e_text_one = info.data.e_text_one
                this.form.e_text_two = info.data.e_text_two
                this.form.tb_one_img = api + info.data.tb_one_img
                this.form.tb_two_img = api + info.data.tb_two_img
                this.form.yj_img = api + info.data.yj_img
            }
        },
        imgChange1(e) {
            this.files1 = e.target.files[0]
            const formData = new FormData();
            formData.append('yj_img', this.files1);
            // 执行上传操作
            this.sendFormData(formData);

        },
        imgChange2(e) {
            this.files2 = e.target.files[0]
            const formData = new FormData();
            formData.append('tb_one_img', this.files2);
            // 执行上传操作
            this.sendFormData(formData);
        },
        imgChange3(e) {
            this.files3 = e.target.files[0]
            const formData = new FormData();
            formData.append('tb_two_img', this.files3);
            // 执行上传操作
            this.sendFormData(formData);
        },
        async onSubmit() {
            let option = {}
            this.form.table_one != this.form2.table_one ? option.table_one = this.form.table_one : '';
            this.form.table_two != this.form2.table_two ? option.table_two = this.form.table_two : '';
            this.form.e_table_one != this.form2.e_table_one ? option.e_table_one = this.form.e_table_one : '';
            this.form.e_table_two != this.form2.e_table_two ? option.e_table_two = this.form.e_table_two : '';
            this.form.text_one != this.form2.text_one ? option.text_one = this.form.text_one : '';
            this.form.text_two != this.form2.text_two ? option.text_two = this.form.text_two : '';
            this.form.e_text_one != this.form2.e_text_one ? option.e_text_one = this.form.e_text_one : '';
            this.form.e_text_two != this.form2.e_text_two ? option.e_text_two = this.form.e_text_two : '';
            this.form.e_content != this.form2.e_content ? option.e_content = this.form.e_content : '';
            this.form.content != this.form2.content ? option.content = this.form.content : '';
            
            if (Object.keys(option).length !== 0) {
                let info = await AxiosPost('/admin/shop_set/savegsyj', option)
                if (info.code !== 10000) {
                    this.$message.error(info.message)
                    return false
                } else {
                    this.getData()
                    this.$message.success('更新成功')
                }
            }

        },
        sendFormData(formData) {
            const _this = this
            const xhr = new XMLHttpRequest();
            xhr.open('POST', 'https://wjapi.surveydiscovery.com/shop_set/savegsyj', true);
            xhr.setRequestHeader('authorization', "Bearer " + localStorage.getItem("uid") + "." + localStorage.getItem("token"));
            xhr.onreadystatechange = function () {
                if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
                    // 上传成功处理逻辑
                    console.log('上传成功');
                    _this.getData()
                }
            };
            xhr.send(formData);
        }
    }
};
//时间戳转换
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 200px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>
